<template>

  <el-dialog
      v-model="add_material_visible"
      title=" 物料调拨 "
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :show-close='false'
  >
    <el-form :model="add_material_variable" :rules="add_material_rules" ref="add_material_ref"
             :label-position=" 'right' " label-width="150px">

      <el-form-item prop="enable" label="转移方向">
        <el-radio-group v-model="add_material_variable.mode">
          <el-radio-button value="mode1">正品转次品</el-radio-button>
          <el-radio-button value="mode2">次品转正品</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="handle_id" label="处理方">
        <FuzzySearchHandle @DataUse="handle_auto_complete_in_material($event as any)"
                           ref="handle_fuzzy_search_ref"
                           :disable="false"
                           @DataClear="handle_clear"/>
      </el-form-item>

      <el-form-item prop="actual_date" label="日期">
        <el-date-picker
            v-model="add_material_variable.actual_date"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item prop="code" label="物料编码">
        <el-input v-model="add_material_variable.code" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item prop="material_name" label="物料名称">
        <el-input v-model="add_material_variable.material_name" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item prop="model" label="物料型号">
        <el-input v-model="add_material_variable.model" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item prop="set_piece" label="件支数">
        <el-input v-model="add_material_variable.set_piece" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item prop="whole_piece" label="转移件数">
        <el-input-number v-model="add_material_variable.whole_piece" autocomplete="off" :min="0" :step="1" step-strictly />
      </el-form-item>
      <el-form-item prop="scatt_piece" label="转移支数">
        <el-input-number v-model="add_material_variable.scatt_piece" autocomplete="off" :min="0" :step="1" step-strictly />
      </el-form-item>
      <el-form-item prop="weight" label="转移重量/吨">
        <el-input-number v-model="add_material_variable.weight" autocomplete="off" :min="0" :step="0.001" step-strictly />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_add_material(add_material_ref)">取消</el-button>
				<el-button type="primary" @click="add_or_update_material(add_material_ref)">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {req_transfer} from "@/api/inventory/material";
import {MaterialList, TransferResp} from "@/api/inventory/material/type.ts";
import FuzzySearchHandle from "@/components/inventory/FuzzySearchHandle.vue";
import {HandleList} from "@/api/inventory/handle/type.ts";

const handle_fuzzy_search_ref = ref()

const add_material_ref = ref<FormInstance>()
const select_material_group_ref = ref()

const handle_auto_complete_in_material = (cmy: HandleList) => {
  add_material_variable.handle_id = cmy.id
}
// 清空添加框内的内容后
const handle_clear = () => {
  add_material_variable.handle_id = null
}
// 添加和修改所需携带变量
const add_material_variable = reactive<{
  mode: 'mode1' | 'mode2'
  material_id: number | null
  handle_id: number | null
  code: string | null
  material_name: string | null
  model: string | null
  set_piece: number | null
  weight: number | null
  whole_piece: number | null
  scatt_piece: number | null
  actual_date: string | null
}>({
  mode: 'mode1',
  handle_id: null,
  material_id: null,
  code: null,
  material_name: null,
  model: null,
  set_piece: null,
  weight: 0,
  whole_piece: 0,
  scatt_piece: 0,
  actual_date: null
})

const add_material_visible = ref(false) // 决定添加和修改框是否显示
const add_material_rules = reactive<FormRules>({
  handle_id: [{
    type: 'number',
    message: '请选择处理方',
    required: true,
  }],
  weight: [{
    type: 'number',
    message: '重量需要是数字，且最多三位小数',
    required: true,
    min: 0,
    max: 99999999,
  }],
  whole_piece: [{
    type: 'number',
    message: '件数需要是整数',
    required: true,
    min: 0,
    max: 99999999,
  }],
  scatt_piece: [{
    type: 'number',
    message: '支数需要是整数',
    required: true,
    min: 0,
    max: 99999999,
  }],
  actual_date: [{
    type: 'string',
    message: '请选择日期',
    required: true,
  }],
})

// 关闭添加小类框
const cancel_add_material = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  add_material_visible.value = false
}

const open = (row: MaterialList) => {
    add_material_variable.material_id = row.id
    add_material_variable.code = row.code
    add_material_variable.material_name = row.name
    add_material_variable.model = row.model
    add_material_variable.set_piece = row.set_piece
    nextTick(()=>{
      select_material_group_ref.value?.make_input_value(row.material_group_name)
    })
  add_material_visible.value = true
}

defineExpose({open});

// 添加小类
const add_or_update_material = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid) => {
    if (valid) {

      req_transfer({
        material_id: add_material_variable.material_id as number,
        handle_id: add_material_variable.handle_id as number,
        mode: add_material_variable.mode,
        weight: add_material_variable.weight as number,
        whole_piece: add_material_variable.whole_piece as number,
        scatt_piece: add_material_variable.scatt_piece as number,
        actual_date: add_material_variable.actual_date as string
      }).then((result: TransferResp) => {
        ElMessage.success(result.success?.message)
      })
      formEl.resetFields()
      handle_fuzzy_search_ref.value.clear_input()
      add_material_visible.value = false
    }
  })
}
</script>

<style scoped>

</style>